<template>
	<view class="qty-lost" :style="{'--height':height+'px'}">
		<view class="spc-search">
			<u-search @search="searchEv" @custom="customEv" :inputStyle="{fontSize:'30rpx',fontWeight:'200'}"
				:clearabled="false" shape="square" bgColor="#F8F7F7" placeholder="请选择"
				v-model="searchName"></u-search>
		</view>
		<view class="data-list">
			<scroll-view scroll-y="true" class="scroll-Y scroll-active" @scrolltolower="scrolltolower">
				<view @click="selectSpcNameEv(index)" class="data-list-itm" v-for="(item,index) in dataList"
					:key="item.value">
					<!-- {{item.label}} -->
					<view class="left">
						<u-icon v-if="item.select==1" name="checkbox-mark" color="#2979ff" size="15"></u-icon>
					</view>
					<view class="right">
						{{item.label}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		basicBaoGongGroupApiGet
	} from '@/common/api/basic.js';

	export default {
		name: "salmUser",
		
		// multiple判断是否多选
		props:['multiple'],
		data() {
			return {
				// 处理建议过滤字段
				searchName: '',
				// 页码
				page: 0,
				dataList:[],
				// 元素的高度
				height: parseInt(uni.getWindowInfo().windowHeight / 2),
				sal_no:'',
				sal_name:''

			}
		},
		async mounted() {
			await this.dataListGetEv()
		},
		methods: {
			async scrolltolower() {
				console.log('触底了')
				await this.dataListGetEv()
			},
			// 选择操作人触发事件
			selectSpcNameEv(index) {
				console.log('选择了触发事件')
				if(this.multiple!=true) {
					for (let s of this.dataList) {
						s.select = 0
					}
				}
				
				this.dataList[index].select = 1
				this.sal_no = this.dataList[index].value
				this.sal_name = this.dataList[index].label
			},
			// 键盘或者回车搜索
			async searchEv() {
				this.page = 0
				this.dataList = []
				await this.dataListGetEv()
			},
			// 点击搜索按钮搜索
			async customEv() {
				this.page = 0
				this.dataList = []
				await this.dataListGetEv()
			},
			// 查询操作人
			async dataListGetEv() {
				try {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					console.log('888')
					this.page += 1
					let arr_data = await basicBaoGongGroupApiGet({
						page: this.page,
						search: this.searchName
					})
					uni.hideLoading();

					if (arr_data.statusCode == 202) {

						uni.showModal({
							content: arr_data.data.msg,
							showCancel: false
						});

						return
					}
					if (arr_data.statusCode !== 200) {
						uni.showModal({
							content: '查询数据失败',
							showCancel: false
						});

						return
					}
					console.log(6666)
					console.log(arr_data)
					this.dataList = [...this.dataList, ...arr_data.data.result.data]
				} catch (err) {
					//TODO handle the exception
					console.log(err)
					uni.hideLoading();
					let message = '接口请求失败请联系管理员'
					if (err.statusCode == 401) {
						message = err.data.msg
					}
					uni.showModal({
						content: message,
						showCancel: false
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.qty-lost {
		height: var(--height);
		width: 100%;
		// background-color: red;
	}


	.prc-title {
		font-size: 30rpx;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
	}

	.prc-name {
		display: flex;
		height: 60px;
		flex-wrap: wrap;
	}

	/deep/ .prc-name .u-radio__text {
		padding-top: 10rpx;
		box-sizing: border-box;
		font-size: 30rpx !important;
		width: 80px;
	}

	.spc-no {
		font-size: 30rpx;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
	}

	.spc-search {
		font-size: 30rpx;
		font-weight: bold;
		height: 30px;
		// line-height: 30px;
		// background-color: red;
	}

	/deep/ .spc-search .u-search {
		height: 100%;
	}

	/deep/ .spc-search .u-search .u-search__content {
		height: 100%;
	}

	.data-list {
		height: calc(100% - 30px);
		overflow: hidden;
		overflow-y: scroll;
		// background-color: pink;
		padding-top: 5px;
		box-sizing: border-box;

		.data-list-itm {
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			border:none;
			border-radius:0;
			border-bottom: solid 1px var(--common-border-color);
			// border-bottom: solid 1px red;

			.left {
				width: 25rpx;
				height: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				// line-height: 25rpx;
				border-radius: 50%;
				border: solid 1px #c8c9cc;
			}

			.right {
				width: calc(100% - 20px);
				padding-left: 2px;
				box-sizing: border-box;
			}
		}
	}

	.data-list .data-list-itm:active {
		color: #c8c9cc;
	}

	.scroll-active {
		height: 100%;
		white-space: nowrap;
	}
	/deep/ .u-radio-group {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap !important;
	}
	
	// /deep/ .left .u-icon--right{
	// 	width: 25rpx;
	// 	height: 25rpx;
	// 	line-height: 25rpx;
	// 	text-align: center;
	// }
</style>